<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:data="http://www.w3.org/1999/xhtml">
<head>
    <!--<meta content="text/html;charset=UTF-8"/>-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<head th:include="include/include"></head>
<style>
.marginTop10{
    margin-top: 10px;
}
/*去除左边空白*/
.modal.fade.in{
   /* padding-right: 17px;*/
    padding-left:  0 !important;

}
/*去除顶部空白*/
.modal-dialog{
    margin-top: 0 !important;
}
/*body {
    padding-right: 0px !important;
}
*.modal-open {
    overflow-y: scroll;
    padding-right: 0 !important;
}*/
/*去除因弹出框出现的外部竖向滚动条*/
.modal-open .modal{
    overflow-y:hidden;

}
</style>
<script>
    $(function(){
        //初始化表格
        tableInit();
        resizeHtml();
    });
    function resizeHtml(){
        var bodyHeigth=document.documentElement.clientHeight;
        var h=window.parent.getiIframePageContentHeight();
        $("#caseIframe").height(h);//设置弹出框的高度
        console.log("获取高度为"+bodyHeigth);

    }
    function getCaseIframeHeight(){
        return $("#caseIframe").height;
    }
    function text(val) {
        return val;
        
    }
    //为了兼容ie
    function iframeIsLoad(iframe,callback){
        if(iframe.attachEvent) {
            iframe.attachEvent('onload',function(){
                callback && callback();
            });
        }else {
            iframe.onload = function(){
                callback && callback();
            }
        }
    }
    //点击任务号弹出框
    function caseModal(val,data){
        $("#caseIframe").attr("src","claim_detail");//加载页面
        $('#caseModal').modal({ show: true});//模态框显示
        //$("#hideCaseNo").text("案件编号为:"+val);//弹出界面顶部的值
        var child= document.getElementById("caseIframe");
        var childWindow = $("#caseIframe")[0];
        iframeIsLoad(childWindow,function(){
            childWindow.contentWindow.getParentData(val,data);   // 打印出 我是子页面
        });
    }

    /*初始化表格*/
    function tableInit(){
        $("#caseListTable").bootstrapTable({
            url:"claimTask/findTaskAndDetailInfoByPage"
            ,method:'get'
            ,cache:false /*禁用ajax数据缓存，默认true*/
            ,striped:true//表格显示条纹，默认为false
            ,pagination:true// 在表格底部显示分页组件，默认false
            ,pageList: [5,10, 20,50,100,200], // 设置页面可以显示的数据条数
            pageSize: 50, // 页面数据条数
            pageNumber: 1, // 首页页码
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            sidePagination: 'server' // 设置为服务器端分页
            ,showToggle:true                  //是否显示详细视图和列表视图的切换按钮
            ,cardView: false                  //是否显示详细视图
            , detailView: false                 //是否显示父子表
            ,minimumCountColumns: 2            //最少允许的列数
            ,search: true                     //是否显示表格搜索
            ,queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
                return {
                    limit: params.limit, // 每页要显示的数据条数
                    offset: params.offset, // 每页显示数据的开始行号
                    page:params.offset/params.limit+1,
                    sort: params.sort// 要排序的字段
                    // ,sortOrder: params.order, // 排序规则
                    // dataId: $("#dataId").val() // 额外添加的参数
                }
            }
            , sortName: 'ids'// 要排序的字段
            , sortOrder: 'desc' // 排序规则

            ,columns:[
                {
                    checkbox:true /*显示多选框*/
                    ,align:"center"
                    ,valign: 'middle' // 上下居中
                },

                {
                    title:"序号",
                    width:20,
                    align:"center"
                    ,valign: 'middle' // 上下居中
                    ,formatter:function(value,row,index){
                        return index+1;
                    }
                }


                ,{
                    field: 'ids', // 返回json数据中的name
                    title: 'ID', // 表格表头显示文字
                    align: 'center', // 左右居中
                    valign: 'middle', // 上下居中
                    visible:false //隐藏
                }
                ,{
                    field:"taskNo"
                    ,title:"案件编号"
                    ,align:"center"
                    ,valign:"middle"
                    ,formatter:function(value,row,index){
                        var taskNo=row.taskNo;//任务号
                        var ids =row.ids;//任务id
                        var state=row.state;//状态
                        var baoanshijian=row.claim.baoanshijian;//报案时间
                        var jsyxm=row.jiashiyuanname;//驾驶员姓名
                        var insuredName=row.insuredName;//被保险人
                        var chepaihao=row.chepaihao;//车牌号
                        var licenseOwner=row.licenseOwner;///实际驾驶员
                        var credentislasNum=row.credentislasNum;//驾驶员证件号码
                        var bizNo=row.bizNo;//商业险保单
                        var forceNo=row.forceNo;//交强险保单号
                        var modleName=row.modleName;//品牌型号
                        var forceExpireDate=row.forceExpireDate;//交强险到期
                        var businessExpireDate=row.businessExpireDate//商业险到期
                        var shiguzeren=row.claim.shiguzeren;//事故责任
                        var sgzrbfb=row.sgzrbfb;//事故责任百分比
                        var peikuanjine=row.peikuanjine;//赔款金额

                        var datas=[taskNo,ids,state,baoanshijian,jsyxm,insuredName,chepaihao,licenseOwner,credentislasNum,bizNo,forceNo,modleName,forceExpireDate,businessExpireDate,shiguzeren,sgzrbfb,peikuanjine];

                        var s= "<a onclick=\"caseModal('"+value+"','"+datas+"');\">"+value+"</a>";
                        return  s;
                    }

                }
                ,{
                    field:"insuredName"
                    ,title:"被保人"
                    ,align:"center"
                    ,valign:"middle"

                }
                ,{
                    field:"baoanrentel"
                    ,title:"报案人电话"
                    ,align:"center"
                    ,valign:"middle"
                }

                ,{
                    field:"chepaihao"
                    ,title:"牌照"
                    ,align:"center"
                    ,valign:"middle"
                }
                ,{
                    field:"claim.shiguaddress"
                    ,title:"地址"
                    ,align:"center"
                    ,valign:"middle"
                    ,editable: {
                        type: 'text',
                        title: '地址',
                        validate: function (v) {
                            if (!v) return '地址不能为空';

                        }
                    }
                }
                ,{
                    field:""
                    ,title:"是否立案"
                    ,align:"center"
                    ,valign:"middle"
                }
                ,{
                    field:"baoantime"
                    ,title:"报案时间"
                    ,align:"center"
                    ,valign:"middle"
                    ,formatter:function(value,row,index){
                        var d = new Date(value);
                        var times=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
                       return times;
                    }
                }
                ,{
                    field:"dispatchingTime"
                    ,title:"派工时间"
                    ,align:"center"
                    ,valign:"middle"
                    ,formatter:function(value,row,index){
                        var d = new Date(value);
                        var times=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
                        return times;
                    }
                }
                ,{
                    field:"user.userName"
                    ,title:"定损人"
                    ,align:"center"
                    ,valign:"middle"
                }
                ,{
                    field:"claim.isweituopingtai"
                    ,title:"是否委托平台"
                    ,align: 'center', // 左右居中
                    valign: 'middle' // 上下居中
                    ,formatter:function(value,row,index){
                        if(value=="1")return "是"
                        else if(value=="0")return "否"
                    }
                }
                , {
                    title: "操作",
                    align: 'center',
                    valign: 'middle',
                    width: 160, // 定义列的宽度，单位为像素px
                    formatter: function (value, row, index) {
                        return '<button class="btn btn-primary btn-sm" onclick="del(\'' + row.stdId + '\')">删除</button>';
                    }
                }
            ]
            ,onEditableSave: function (field, row, oldValue, $el) {
            }
            ,onLoadSuccess: function(){  //加载成功时执行
                $(".bs-checkbox").css({'text-align':"center","vertical-align":"middle"})
                console.info("加载成功");
            },
            onLoadError: function(){  //加载失败时执行
                console.info("加载数据失败");
            }

        })
    }


</script>

<body>
<!--<div style="width:1230px;height:968px;margin-left: auto;margin-right: auto;">-->
<!---fluid-->
    <div class="container-fluid margin5Left">
        <!--引导栏-->
        <div class="margin10Left guideBar">
            <ol class="breadcrumb" style="padding: 0 0;margin-left:-10px;">
                <li><a href="javascript:void(0)">首页</a></li>
                <li class="active">新增勘察</li>
            </ol>
            <!--<a class="margin15Left" href="javascript:void(0)">首页</a>/<a href="javascript:void(0)">新增勘察</a>-->
        </div>
        <!--引导栏结束-->
        <!--分割线-->
        <div style="width: 100%;" class="blue2divider"></div>
        <!--搜索栏-->
        <div id="form" >
            <form class="form-inline" role="form">
                <div class="row" style="margin-top: 5px;">
                    <div class="col-md-3 col-sm-3 col-xs-6  marginTop10">
                        <label >保险公司</label>
                        <select class="form-control"><option value="1">人保</option><option value="1">人保</option><option value="1">人保</option><option value="1">人保</option><option value="1">人保</option><option value="1">人保</option></select>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-6  marginTop10">
                        <label >报案号</label>
                        <input style="width: 100px;" type="text" class="form-control input-sm" placeholder=""/>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-6 marginTop10">
                        <label >保单号</label>
                        <input style="width: 100px;" type="text" class="form-control input-sm" placeholder=""/>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-6 marginTop10">
                        <label >牌照号</label>
                        <input style="width: 100px;" type="text" class="form-control input-sm" placeholder=""/>
                    </div>

                   <!-- <div class="col-md-2 col-sm-2 col-xs-2 marginTop10">
                        <button type="button" class="btn btn-info" onclick="search();">查询</button>
                    </div>-->
                </div>
                <div class="row" style="margin-top: 5px;">

                    <div class="col-md-2 col-sm-3 col-xs-4 marginTop10" >
                        <label >被保人</label>
                        <input style="width: 100px;" type="text" class="form-control input-sm" placeholder=""/>
                    </div>
                    <div class="col-md-5 col-sm-4 col-xs-4  marginTop10" >
                        <label >报案时间</label>
                        <input style="width: 100px;" type="text" class="form-control input-sm" placeholder=""/>
                        --
                        <input style="width: 100px;" type="text" class="form-control input-sm" placeholder=""/>
                    </div>
                    <div class="col-md-5 col-sm-5 col-xs-4 marginTop10" >
                        <label >出险时间</label>
                        <input style="width: 100px;" type="text" class="form-control input-sm" placeholder=""/>
                        --
                        <input style="width: 100px;" type="text" class="form-control input-sm" placeholder=""/>
                        <button type="button" class="btn btn-info" onclick="search();">查询</button>

                    </div>

                </div>
               <!-- <div class="row margin15top">
                    <div class="col-md-3 col-md-offset-6">
                        <button type="button" class="btn btn-info" onclick="search();">查询</button>
                    </div>
                </div>-->
            </form>
        </div>
        <div id="table " class="margin10top" style="height:500px;overflow: auto">
            <table id="caseListTable" class="table table-bordered table-hover " style="width: 100%;"></table>
            <!--table-condensed-->
        </div>
        <!--modal-->
      <!--  <div class="modal fade  bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            &lt;!&ndash;调整大的尺寸myModalLabel&ndash;&gt;
            <div class="modal-dialog " role="document" style="width: 960px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">案件详情</h4>
                    </div>
                    <div class="modal-body" style="height:450px;overflow:auto; ">

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>-->
    </div>
<!--点击案件编号弹出模态框-->
<div class="modal fade" id="caseModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="padding-left: 1px;">
    <div class="modal-dialog" style="width:100%;height:100%;">
        <div class="modal-content" style="top: 0px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="caseModalTitle">案件详情</h4>
            </div>
            <div class="modal-body">
                <!--<p id="hideCaseNo"></p><p id="caseIdHide" style="display: none"></p>-->
                <iframe id="caseIframe" width="100%" height="400px;" frameborder="0"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
<!--去除遮罩层-->
<script>
    jQuery(function($){
        //解决模态框背景色越来越深的问题
        $(document).on('show.bs.modal', '.modal', function(event) {
            $(this).appendTo($('body'));
        }).on('shown.bs.modal', '.modal.in', function(event) {
            setModalsAndBackdropsOrder();
        }).on('hidden.bs.modal', '.modal', function(event) {
            setModalsAndBackdropsOrder();
        });

        function setModalsAndBackdropsOrder() {
            var modalZIndex = 1040;
            $('.modal.in').each(function(index) {
                var $modal = $(this);
                modalZIndex++;
                $modal.css('zIndex', modalZIndex);
                $modal.next('.modal-backdrop.in').addClass('hidden').css('zIndex', modalZIndex - 1);
            });
            $('.modal.in:visible:last').focus().next('.modal-backdrop.in').removeClass('hidden');
        }

        //覆盖Modal.prototype的hideModal方法
        $.fn.modal.Constructor.prototype.hideModal = function () {
            var that = this
            this.$element.hide()
            this.backdrop(function () {
                //判断当前页面所有的模态框都已经隐藏了之后body移除.modal-open，即body出现滚动条。
                $('.modal.fade.in').length === 0 && that.$body.removeClass('modal-open')
                that.resetAdjustments()
                that.resetScrollbar()
                that.$element.trigger('hidden.bs.modal')
            })
        }
    });
</script>
</html>